<template>
  <div class="overview-main">
    <div class="data-row">
      <div class="data-row-item" style="background-color: rgba(0,186,140,0.1);">
        <div class="item-content">
          <div class="item-img">
            <img :src="icon1" class="item-img-size">
          </div>
          <div class="item-text">
            <div>
              <div class="item-text-first">12 种</div>
              <div class="item-text-second">宠物种类</div>
            </div>
          </div>
        </div>
      </div>
      <div class="data-row-item" style="background-color: rgba(121,107,214,0.1);">
        <div class="item-content">
          <div class="item-img">
            <img :src="icon2" class="item-img-size">
          </div>
          <div class="item-text">
            <div>
              <div class="item-text-first">{{ serviceTotal }} 种</div>
              <div class="item-text-second">服务项目</div>
            </div>
          </div>
        </div>
      </div>
      <!--      <div class="data-row-item" style="background-color: rgba(255,117,70,0.1)">-->
      <!--        <div class="item-content">-->
      <!--          <div class="item-img">-->
      <!--            <img :src="icon3" class="item-img-size">-->
      <!--          </div>-->
      <!--          <div class="item-text">-->
      <!--            <div>-->
      <!--              <div class="item-text-first">20 个</div>-->
      <!--              <div class="item-text-second">空闲宠舍</div>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="data-row-item" style="background-color: rgba(0,186,140,0.1)">
        <div class="item-content">
          <div class="item-img">
            <img :src="icon4" class="item-img-size">
          </div>
          <div class="item-text">
            <div>
              <div class="item-text-first">{{ orderCount }} 单</div>
              <div class="item-text-second">订单总数</div>
            </div>
          </div>
        </div>
      </div>
      <div class="data-row-item" style="background-color: rgba(155,65,189,0.1)">
        <div class="item-content">
          <div class="item-img">
            <img :src="icon6" class="item-img-size">
          </div>
          <div class="item-text">
            <div>
              <div class="item-text-first">{{ userCount }}</div>
              <div class="item-text-second">注册客户数</div>
            </div>
          </div>
        </div>
      </div>
      <div class="data-row-item" style="background-color: rgba(121,107,214,0.1)">
        <div class="item-content">
          <div class="item-img">
            <img :src="icon6" class="item-img-size">
          </div>
          <div class="item-text">
            <div>
              <div class="item-text-first">{{ adminCount }}人</div>
              <div class="item-text-second">服务员工数</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ring-row">
      <div class="ring-item">
        <div class="top-item">
          <div class="left-text">订单状态</div>
          <div class="right-btn">
            <i class="el-icon-arrow-right right-btn-icon"/>
          </div>
        </div>
        <div class="chart-item">
          <donut-chart :id-name="firstIdName" :count="firstCount" :x-data="firstXData"
                       :legend-color="firstLegendColor"/>
        </div>
      </div>
      <div class="ring-item">
        <div class="top-item">
          <div class="left-text">支付状态</div>
          <div class="right-btn">
            <i class="el-icon-arrow-right right-btn-icon"/>
          </div>
        </div>
        <div class="chart-item">
          <donut-chart :id-name="secondIdName" :x-data="secondXData" :count="secondCount"
                       :legend-color="secondLegendColor"/>
        </div>
      </div>
      <div class="ring-item">
        <div class="top-item">
          <div class="left-text">人员比重</div>
          <div class="right-btn">
            <i class="el-icon-arrow-right right-btn-icon"/>
          </div>
        </div>
        <div class="chart-item">
          <donut-chart :id-name="fiveIdName" :count="fiveCount" :x-data="fiveXData" :legend-color="fiveLegendColor"/>
        </div>
      </div>
    </div>
    <div class="static-row">
      <div class="static-item">
        <div class="static-item-top">
          <div class="static-left-title">日订单数</div>
        </div>
        <div class="static-item-chart">
          <curve-chart :id-name="thirdIdName" :x-data="thirdXData" :y-data="thirdYData"
                       :legend-color="thirdLegendColor"/>
        </div>
      </div>
      <div class="static-item">
        <div class="static-item-top">
          <div class="static-left-title">员工接单数排行</div>
        </div>
        <div class="static-item-chart">
          <bar-chart :id-name="forthIdName" :x-data="forthXData" :y-data="forthYData" :legend-color="forthLegendColor"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import icon1 from '@/assets/images/home/01.svg'
import icon2 from '@/assets/images/home/02.svg'
import icon3 from '@/assets/images/home/03.svg'
import icon4 from '@/assets/images/home/04.svg'
import icon5 from '@/assets/images/home/05.svg'
import icon6 from '@/assets/images/home/06.svg'
import DonutChart from '@/components/DonutChart'
import CurveChart from '@/components/CurveChart'
import BarChart from '@/components/BarChart'
import {getUser} from "@/api/user";
import {getOrder, peopleOrder, sevenOrder} from "@/api/order";
import {getServiceList} from "@/api/service";

export default {
  name: 'Overview',
  components: {
    DonutChart,
    CurveChart,
    BarChart
  },
  data() {
    return {
      serviceTotal: 0,
      area: '',
      areaArr: [],
      deviceType: '',
      deviceTypeArr: [],
      powerStation: '',
      powerStationArr: [],
      icon1: icon1,
      icon2: icon2,
      icon3: icon3,
      icon4: icon4,
      icon5: icon5,
      icon6: icon6,
      firstIdName: 'firstChart',
      firstXData: [
        {value: 0, name: '已接单'},
        {value: 0, name: '未接单'}
      ],
      firstCount: 0,
      firstLegendColor: ['#409EFF', '#FF527A'],
      secondIdName: 'secondChart',
      secondXData: [
        {value: 0, name: '已支付'},
        {value: 0, name: '待支付'}
      ],
      secondCount: 0,
      secondLegendColor: ['#409EFF', '#FF527A'],
      fiveIdName: 'fiveChart',
      fiveXData: [
        {value: this.userCount, name: '员工'},
        {value: 0, name: '客户'},
      ],
      fiveCount: 0,
      fiveLegendColor: ['#409EFF', '#FF527A'],
      leftCycle: '2',
      leftSecondCycle: '3',
      leftTime: '',
      thirdIdName: 'thirdChart',
      thirdXData: [],
      thirdYData: [],
      thirdLegendColor: ['#409EFF'],
      forthIdName: 'forthChart',
      forthXData: ['0.2', '0.1', '0.1', '0.2', '0.3'],
      forthYData: ['王水彤', '李香桃', '张初柳', '罗含莲', '赵盼晴'],
      forthLegendColor: ['#58D19B'],
      finish: 0,
      unfinished: 0,
      userCount: 0,
      adminCount: 0,
      orderCount: 0
    }
  },
  mounted() {
    this.queryService()
    this.unFinishOrder()
    this.queryUser()
    this.orderQuery()
    this.querySevenOrder()
    this.queryPeopleOrder()
  },
  methods: {
    querySevenOrder() {
      sevenOrder().then(response => {
        if (response.code === 200) {
          this.thirdXData = []
          this.thirdYData = []
          for (let i = 0; i < response.data.length; i++) {
            this.thirdXData.push(response.data[i].date)
            this.thirdYData.push(response.data[i].num)
          }
        } else {
          this.$message.error(response.msg);
        }
      })
    },
    numSort(data) {
      //使用sort排序
      data.sort((a, b) => b.num === a.num ? b.sort - a.sort : b.num - a.num);
      return data;
    },
    queryPeopleOrder() {
      peopleOrder().then(response => {
        if (response.code === 200) {
          this.forthXData = []
          this.forthYData = []
          let dataArr = []
          for (let j = 0; j < response.data.length; j++) {
            dataArr.push(
                {
                  name: response.data[j].name,
                  num: response.data[j].num,
                  Number: j
                }
            )
          }
          let dataArrSort = this.numSort(dataArr)
          dataArrSort.reverse()
          for (let i = 0; i < response.data.length; i++) {
            this.forthXData.push(dataArrSort[i].num)
            this.forthYData.push(dataArrSort[i].name)
          }
        } else {
          this.$message.error(response.msg);
        }
      })
    },
    queryService() {
      let params = {
        pageNo: 1,
        pageSize: 1000
      }
      getServiceList(params).then(response => {
        if (response.code === 200) {
          this.serviceTotal = response.data.total
        } else {
          this.$message.error(response.msg);
        }
      })
    },
    queryUser() {
      let params = {
        role: "user",
        pageNo: 1,
        pageSize: 1000
      }
      getUser(params).then(response => {
        if (response.code === 200) {
          this.userCount = response.data.total
          this.queryAdmin()
        } else {
          this.$message.error(response.msg);
        }
      })
    },
    queryAdmin() {
      let params = {
        role: "admin",
        pageNo: 1,
        pageSize: 1000
      }
      getUser(params).then(response => {
        if (response.code === 200) {
          this.adminCount = response.data.total
          this.fiveXData = [
            {value: this.userCount, name: '员工'},
            {value: this.adminCount, name: '客户'},
          ]
          this.fiveCount = this.userCount + this.adminCount
        } else {
          this.$message.error(response.msg);
        }
      })
    },
    payOrder() {
      let params = {
        payStatus: '1',
        pageNo: 1,
        pageSize: 1000
      }
      getOrder(params).then(response => {
        if (response.code === 200) {
          this.secondXData = [
            {value: response.data.total, name: '已支付'},
            {value: this.orderCount - response.data.total, name: '待支付'}
          ]
          this.secondCount = this.orderCount
        } else {
          this.$message.error(response.msg);
        }
      })
    },
    unFinishOrder() {
      let params = {
        status: 0,
        pageNo: 1,
        pageSize: 1000
      }
      getOrder(params).then(response => {
        if (response.code === 200) {
          this.firstXData = []
          this.firstXData.push({value: response.data.total, name: '未接单'})
          this.unfinished = response.data.total
          this.finishOrder()
        } else {
          this.$message.error(response.msg);
        }
      })
    },
    finishOrder() {
      let params = {
        status: 1,
        pageNo: 1,
        pageSize: 1000
      }
      getOrder(params).then(response => {
        if (response.code === 200) {
          this.firstXData.push({value: response.data.total, name: '已接单'})
          this.firstCount = this.unfinished + response.data.total
        } else {
          this.$message.error(response.msg);
        }
      })
    },
    orderQuery() {
      let params = {
        pageNo: 1,
        pageSize: 1000
      }
      getOrder(params).then(response => {
        if (response.code === 200) {
          this.orderCount = response.data.total
          this.payOrder()
        } else {
          this.$message.error(response.msg);
        }
      })
    },
  }
}
</script>

<style>
.overview-main .el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 140px;
}
</style>

<style lang="scss" scoped>
.overview-main {
  width: 100%;
  height: 100%;
  background: #F7F7F7;
  padding: 20px 20px 0 20px;
  overflow: auto;
  box-sizing: border-box;

  .data-row {
    display: flex;
    justify-content: space-around;
    height: 130px;
    background-color: #ffffff;

    .data-row-item {
      width: 320px;
      height: 90px;
      margin: 20px 0;

      .item-content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 90px;

        .item-img {
          .item-img-size {
            width: 38px;
            height: 38px;
          }
        }

        .item-text {
          margin-left: 24px;
          user-select: none;

          .item-text-first {
            font-family: Helvetica;
            font-size: 16px;
            color: #000000;
            font-weight: 400;
            margin-bottom: 9.5px;
          }

          .item-text-second {
            font-family: Helvetica;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.5);
            font-weight: 400;
          }
        }
      }
    }
  }

  .ring-row {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    .ring-item {
      width: 552px;
      height: 280px;
      padding: 20px 30px 0 30px;
      background-color: #ffffff;

      .top-item {
        display: flex;
        justify-content: space-between;

        .left-text {
          font-family: Helvetica;
          font-size: 18px;
          color: #000000;
          font-weight: 400;
          user-select: none;
        }

        .right-btn {
          width: 25px;
          height: 24px;
          border: 1px solid #DCDFE6;
          border-radius: 3.5px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          .right-btn-icon {
            font-size: 16px;
            color: #808080;
          }
        }
      }

      .chart-item {
        margin-left: -60px;
        margin-top: 10px;
      }

      .devote-item {
        display: flex;
        justify-content: space-between;
        margin: 34px 30px 36px 30px;

        .item-content {
          display: flex;
          flex-direction: column;
          align-items: center;

          .item-img-size {
            width: 106px;
            height: 106px;
          }

          .item-text-first {
            font-family: Helvetica;
            font-size: 18px;
            color: #000000;
            font-weight: 400;
            margin-top: 29px;
            user-select: none;

            .item-text-unit {
              font-family: Helvetica;
              font-size: 14px;
              color: #000000;
              font-weight: 400;
              margin-left: 8.76px;
              user-select: none;
            }
          }

          .item-text-second {
            font-family: Helvetica;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.5);
            font-weight: 400;
            margin-top: 20px;
            user-select: none;
          }
        }
      }
    }
  }

  .static-row {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    .static-item {
      width: 870px;
      height: 350px;
      padding: 20px 30px 0 30px;
      background-color: #ffffff;

      .static-item-top {
        display: flex;
        justify-content: space-between;

        .static-left-title {
          font-family: Helvetica;
          font-size: 18px;
          color: #000000;
          font-weight: 400;
        }
      }

      .static-item-chart {
        margin-top: 19.5px;
      }
    }
  }
}
</style>
